<template>
  <div>
    <Header></Header>
    <div class="userinfo">
      <!-- 图片 -->
      <div class="oneimg">
        <img src="../assets/bannerTop_new.png" class="img" alt="" />
      </div>
      <!-- 头像区域 -->
      <div class="info">
        <img
          v-if="userInfo.user_img !== null"
          :src="userInfo.user_img"
          alt=""
          class="head"
        />
        <img v-else :src="imgSrc" alt="" class="head" />
        <div class="right">
          <div class="right-up">
            粉丝:50 | 关注:50 | 获赞:999
          </div>

          <div class="right-down">
            <van-button
              plain
              type="primary"
              class="btn"
              @click="$router.push('/edit')"
              >编辑资料</van-button
            >
          </div>
        </div>
      </div>

      <!-- 昵称 -->
      <div class="nameP">
        <h2 class="name" v-if="userInfo.name !== null">{{ userInfo.name }}</h2>
        <h2 class="name" v-else>{{ name }}</h2>
      </div>
      <!-- 签名 -->
      <div class="sign">
        <p class="signp" v-if="userInfo.user_desc !== null">
          {{ userInfo.user_desc }}
        </p>
        <p class="signp" v-else>{{ sign }}</p>
      </div>
      <!-- 展示区域 -->
      <hr class="hr" color="#e7e7e7" size="1" />
      <div class="dt">
        <van-tabs
          title-active-color="#fb7299"
          title-inactive-color="black"
          line-height="0"
        >
          <van-tab title="动态">
            <div class="tab-left">
              <span>动态</span>
            </div>
          </van-tab>
          <van-tab title="视频">
            <div class="tab-right">
              <span>视频</span>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <hr class="hr" color="#e7e7e7" size="1" />
    </div>
  </div>
</template>

<script>
import Header from "@/view/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      imgSrc: "../assets/aa.jpg",
      name: "user",
      sign: "这个人很神秘，什么信息都没有....",
      userInfo: {}
    }
  },
  created() {
    // 进入页面获取数据
    this.getUserData()
  },
  methods: {
    async getUserData() {
      const res = await this.$http.get(`/user/${localStorage.getItem("id")}`)
      this.userInfo = res.data[0]
    }
  }
}
</script>

<style lang="less" scoped>
.userinfo {
  > div {
    display: flex;
  }
}
.img {
  height: 80px;
  width: 100%;
}
.oneimg {
  background-color: #fff;
}
.info {
  background-color: #fff;
  margin-top: 0;
  .head {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 5px 0 0 10px;
  }
}
.right {
  display: felx;
  flex: 1;
  margin-left: 40px;
  align-items: center;
  justify-content: center;
  .right-up {
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
  }
  .right-down {
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      color: #fb7299;
      border-color: #fb7299;
      width: 100%;
      height: 30px;
      margin: 10px 10px 0 10px;
    }
  }
}
.nameP {
  background-color: #fff;
  .name {
    display: flex;
    margin: 10px 20px 0 5px;
  }
}

.sign {
  background-color: #fff;
  .signp {
    font-size: 4.167vw;
    margin-left: 20px;
    margin-top: 17px;
  }
}
.dt {
  background-color: #fff;
  .tab-right {
    background-color: #fff;
    height: 100px;
  }
  .tab-left {
    background-color: #fff;
    height: 100px;
  }
}
.hr {
  margin: 0;
}
</style>
